<template>
  <div class="simple-add-product">
    <h3>添加商品</h3>
    <el-form :model="form" label-width="80px">
      <!-- 商品名称 -->
      <el-form-item label="商品名称">
        <el-input v-model="form.name" placeholder="输入商品名称"></el-input>
      </el-form-item>
      
      <!-- 商品分类 -->
      <el-form-item label="商品分类">
        <el-select v-model="form.category" placeholder="选择分类">
          <el-option label="营养餐" value="营养餐"></el-option>
          <el-option label="烧烤" value="烧烤"></el-option>
          <el-option label="小吃" value="小吃"></el-option>
        </el-select>
      </el-form-item>
      
      <!-- 商品价格 -->
      <el-form-item label="商品价格">
        <el-input-number v-model="form.price" :min="0"></el-input-number>
      </el-form-item>
      
      <!-- 商品图片 -->
      <el-form-item label="商品图片">
        <el-upload
          class="avatar-uploader"
          :action="'api/goods/goods_img_upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.imgUrl" :src="`${serverUrl}/upload/imgs/goods_img/${form.imgUrl}`" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      
      <!-- 商品描述 -->
      <el-form-item label="商品描述">
        <el-input v-model="form.goodsDesc" type="textarea" rows="3"></el-input>
      </el-form-item>
      
      <!-- 添加按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submit">添加商品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { addGoods, uploadGoodsImg } from '@/api/account'
import { serverUrl } from '@/utils/common'
import { Plus } from '@element-plus/icons-vue'

const form = reactive({
  name: '',
  category: '',
  price: 0,
  imgUrl: '',
  goodsDesc: ''
})

const submit = async () => {
  // 检查所有必填参数是否填写完整
  if (!form.name || !form.category || !form.price || !form.imgUrl || !form.goodsDesc) {
    ElMessage.warning('请填写完整信息')
    return
  }

   console.log(" 准备提交的数据"+form.imgUrl);
    
  const submitData = {
    name: form.name,
    category: form.category,
    price: form.price,
    imgUrl: form.imgUrl,
    goodsDesc: form.goodsDesc
  }
  // console.log(form.imgUrl);
  try {
    // 调用封装好的 addGoods 接口
    const response = await addGoods(submitData)
    
    if (response.code === 0) {
      ElMessage.success(response.msg)
    } else if (response.code === 1) {
      ElMessage.error(response.msg)
    } else if (response.code === 5001) {
      ElMessage.error(response.msg)
    }
  } catch (error) {
    ElMessage.error('请求失败，请稍后再试')
    console.error('添加商品失败:', error)
  }
}

// 上传前校验
const beforeAvatarUpload = (rawFile) => {
  if (!rawFile.type.includes('image')) {
    ElMessage.error('商品头像必须是图片');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!');
    return false;
  }
  return true;
}

// 上传成功回调
const handleAvatarSuccess = (res) => {
  if (res.code === 0) {

    const fileName = res.imgUrl.split('/').pop();
    form.imgUrl = fileName;
    ElMessage.success('图片上传成功');
    // console.log('原始返回:', res);
    //  console.log('拼接后:', form.imgUrl);
  } else {
    ElMessage.error(res.msg);
  }
}
</script>

<style scoped>
.simple-add-product {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>